import 'package:after_sale_plugin/pages/product_manual/state.dart';
import 'package:after_sale_plugin/r.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:lx_widgets_library/language/language_util.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

import 'controller.dart';

class ProductManualView extends BaseGetView<ProductManualController> {
  ProductManualView({super.key});

  @override
  String get title => controller.isManual
      ? AppLanguageUtil.to.titleProductManual
      : AppLanguageUtil.to.titleProductGuide;

  @override
  Color? get barBackgroundColor => Colors.black;

  @override
  Widget? get backView => CommonWidgets.appBarLeading();

  @override
  Widget buildBody(BuildContext context) {
    return Obx(
      () => Scaffold(
        backgroundColor: Colors.black,
        resizeToAvoidBottomInset: false,
        body: Column(
          children: [
            LxSegment(
              segments: controller.state.segments,
              index: controller.state.selectedIndex.value,
              onTap: (p0) {
                if (controller.isManual) {
                  controller.getManualList(scooter: p0 == 0);
                } else {
                  controller.getVideoGuideList(scooter: p0 == 0);
                }
              },
            ),
            const SizedBox(height: 10),
            Expanded(child: controller.isManual ? _manualList() : _guideList())
          ],
        ),
      ),
    );
  }

  Widget _guideList() {
    double imgH = 64;
    return ListView.separated(
      controller: controller.scrollController,
      itemCount: controller.state.productModels.length,
      itemBuilder: (BuildContext context, int index) {
        var model = controller.state.productModels[index];
        return Padding(
          padding: EdgeInsets.fromLTRB(CONTENT_MARGIN, CONTENT_MARGIN / 2,
              CONTENT_MARGIN, CONTENT_MARGIN / 2),
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(8)),
            child: Container(
              padding: EdgeInsets.all(CONTENT_MARGIN),
              color: const Color(0xFF141414),
              child: Obx(
                () => Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            ClipRRect(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(4)),
                              child: Container(
                                color: const Color(0xFF2B2B2B),
                                width: imgH,
                                height: imgH,
                                child: FadeInImage(
                                  fit: BoxFit.fitWidth,
                                  placeholder: const AssetImage(
                                      R.placeholder_img_png,
                                      package: PACKAGE_NAME),
                                  image: NetworkImage(model.url),
                                ),
                              ),
                            ),
                            const SizedBox(width: 10),
                            LxText(
                              model.name,
                              fontWeightEnum: LxFontWeightEnum.titleMedium,
                            ),
                          ],
                        ),
                        Visibility(
                          visible: model.subModels.isNotEmpty,
                          child: InkWell(
                            onTap: () {
                              controller.state.productModels[index].isExpand
                                      .value =
                                  !controller.state.productModels[index]
                                      .isExpand.value;
                            },
                            child: SizedBox(
                              width: 44,
                              height: 44,
                              child: Center(
                                child: Image.asset(
                                  model.isExpand.value
                                      ? R.arrow_up_png
                                      : R.arrow_down_png,
                                  package: PACKAGE_NAME,
                                  fit: BoxFit.fitWidth,
                                  width: 24,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    Visibility(
                      visible: model.isExpand.value,
                      child: Column(
                        children: model.subModels.asMap().keys.map((index) {
                          return Column(
                            children: [
                              const SizedBox(height: 10),
                              _video(model.subModels[index], index),
                            ],
                          );
                        }).toList(),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return const Divider(
          color: Colors.transparent,
          height: 0,
          indent: 20,
        );
      },
    );
  }

  Widget _video(ProductSubModel model, int index) {
    return InkWell(
      onTap: () {
        controller.videoGuide(model);
      },
      child: Stack(
        children: [
          Visibility(
            visible: model.content.isNotEmpty,
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  FadeInImage(
                    width: double.infinity,
                    height: 173,
                    fit: BoxFit.fitHeight,
                    placeholder: const AssetImage(R.placeholder_img_png,
                        package: PACKAGE_NAME),
                    image: NetworkImage(model.thumbnail),
                  ),
                  Container(
                    width: double.infinity,
                    height: 173,
                    color: Colors.black.withOpacity(0.6),
                  ),
                  InkWell(
                    onTap: () {
                      controller.videoGuide(model);
                    },
                    child: SizedBox(
                      width: 56,
                      height: 56,
                      child: Image.asset(
                        R.start_play_png,
                        package: PACKAGE_NAME,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8, left: 8),
            child: LxText(
              model.title,
              fontWeightEnum: LxFontWeightEnum.titleMedium,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  Widget _manualList() {
    double imgH = 96;
    return ListView.separated(
      controller: controller.scrollController,
      itemCount: controller.state.productModels.length,
      itemBuilder: (BuildContext context, int index) {
        var model = controller.state.productModels[index];
        return Padding(
          padding: EdgeInsets.fromLTRB(CONTENT_MARGIN, CONTENT_MARGIN / 2,
              CONTENT_MARGIN, CONTENT_MARGIN / 2),
          child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(8)),
            child: Container(
              padding: EdgeInsets.all(CONTENT_MARGIN),
              color: const Color(0xFF141414),
              child: Row(
                children: [
                  ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(4)),
                    child: Container(
                      color: const Color(0xFF2B2B2B),
                      width: imgH,
                      height: imgH,
                      child: FadeInImage(
                        fit: BoxFit.fitWidth,
                        placeholder: const AssetImage(R.placeholder_img_png,
                            package: PACKAGE_NAME),
                        image: NetworkImage(model.url),
                      ),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: SizedBox(
                      height: imgH,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          LxText(
                            model.name,
                            fontWeightEnum: LxFontWeightEnum.titleMedium,
                            color: Colors.white,
                          ),
                          Row(
                            children: [
                              Flexible(
                                child: Center(
                                  child: InkWell(
                                    onTap: () {
                                      // 产品手册
                                      controller.manual(model.subModels[0]);
                                    },
                                    child: _manual(
                                      model.subModels[0],
                                    ),
                                  ),
                                ),
                              ),
                              Flexible(
                                child: Center(
                                  child: Visibility(
                                    visible: model.count >= 2,
                                    replacement: const SizedBox(width: 1),
                                    child: InkWell(
                                      onTap: () {
                                        // 操作手册
                                        controller.manual(model.subModels[1]);
                                      },
                                      child: _manual(
                                        model.count >= 2
                                            ? model.subModels[1]
                                            : ProductSubModel.fromMap(
                                                {},
                                              ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return const Divider(
          color: Colors.transparent,
          height: 0,
          indent: 20,
        );
      },
    );
  }

  Widget _manual(ProductSubModel model) {
    return Column(
      children: [
        SizedBox(
          width: 34,
          height: 34,
          child: Image.asset(
            model.type == ProductManualType.manual
                ? R.user_manual_png
                : R.operator_icon_png,
            package: PACKAGE_NAME,
            fit: BoxFit.fitWidth,
            width: 32,
          ),
        ),
        const SizedBox(height: 5),
        LxText(
          model.title,
          fontWeightEnum: LxFontWeightEnum.bodySmall,
          color: Colors.white.withOpacity(0.6),
        ),
      ],
    );
  }
}
